<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">基础数据</span>
			<span class="h2">征收类别</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content" style="margin-bottom: 20px;">
				<div class="clearfix">
					<div class="fl">
						<el-button type="primary" size="small" @click="adddic()">添加征收类别</el-button>
					</div>
					<div class="fr">
						<el-input v-model="search" placeholder="请输入内容" style="width:217px;"></el-input>
						<el-button type="primary" @click='searchs()'>查询</el-button>
					</div>
				</div>
			</div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" width="50">
    			</el-table-column>
				<el-table-column prop="ID" label="ID"  align='center'  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Name" label="名称"  align='center'>
				</el-table-column>
				<el-table-column prop="CategoryStr" label="征拆类别返回"  align='center'>
				</el-table-column>
				<el-table-column prop="DefineStr" label="定义类型"  align='center'>
				</el-table-column>
				<el-table-column label="操作"  align='center'>
					<template slot-scope="scope">
						<el-button size="small" type="success" @click='editst(scope.row.ID,scope.row.Name,scope.row.DefineID)'>修改</el-button>
						<el-button size="small" type="danger" @click='dels(scope.row.ID)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
			<div class="Popup">
				<el-dialog title="类别管理" :visible.sync="lands" width="400px">
					<div>
						<el-form :label-position="labelPosition" label-width="80px" :model="form">
							<el-form-item label="类别名称:">
								<el-input v-model="form.name" placeholder="请输入征收类别名称"></el-input>
							</el-form-item>
							<el-form-item label="定义类型:">
								<el-select v-model="form.DefineID" placeholder="请选择定义类型">
									<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="lands = false">取 消</el-button>
						<el-button type="primary" @click="landsTrue()">确 定</el-button>
					</span>
				</el-dialog>
				<el-dialog title="修改类别" :visible.sync="lands1" width="400px">
					<div>
						<el-form :label-position="labelPosition" label-width="80px" :model="form">
							<el-form-item label="类别名称:">
								<el-input v-model="form.name"  placeholder="请输入征收类别名称"></el-input>
							</el-form-item>
							<el-form-item label="定义类型:">
								<el-select v-model="form.DefineID" placeholder="请选择定义类型">
									<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="lands1 = false">取 消</el-button>
						<el-button type="primary" @click="editLand()">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "category",
  data() {
    return {
      loading: false,
      labelPosition: "right",
      search: "", //搜索
      pages: 1, //分页页码
      total: 1, //条数
      lands: false,
      lands1: false,
      tableData: [],
      typs: [
        {
          value: 1,
          label: "土地征收"
        },
        {
          value: 2,
          label: "林木征收"
        },
        {
          value: 3,
          label: "房屋主体"
        },
        {
          value: 4,
          label: "房屋装修"
        },
        {
          value: 5,
          label: "坟山迁移"
        },
        {
          value: 6,
          label: "特殊征拆"
        }
      ], //定义类型
      form: {
        id: "",
        name: "",
        DefineID: 1
      }
    };
  },
  created() {
    this.cataList();
  },
  methods: {
	//查询
	searchs(){
		this.pages = 1
		this.cataList(this.search,this.pages)
	},
    //分页
    handleCurrentChange(val) {
		this.pages = val
      this.cataList(this.search,this.pages);
    },
    //获取征收类别列表
    cataList(val,pages) {
      this.$post(api.cataList, {
        Para: {
          QueryKeyWord: val
        },
        PageSize: 10,
        PageIndex: pages-1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
			this.tableData = response.Data.Data;
			this.total = response.Data.Items ? response.Data.Items : 1
          }
        })
        .catch(err => {
          this.$message.error("服务器内部错误");
        });
    },
    adddic() {
      this.form.DefineID = 1;
      this.form.name = "";
      this.lands = true;
    },
    landsTrue() {
      if (this.form.name == "") {
        this.$message({
          message: "参数不能为空",
          type: "warning"
        });
        return;
      }
      this.loading = true;
      this.$post(api.cataAdd, {
        Name: this.form.name,
        DefineID: this.form.DefineID
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.cataList();
            this.loading = false;
			this.lands = false;
			this.search=''
			this.pages = 1
			this.cataList(this.search,this.pages)
            this.$message({
              message: "添加成功",
              type: "success"
            });
          } else {
            this.loading = false;
            this.lands = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.lands = false;
          this.loading = false;
          this.$message.error("服务器内部错误");
        });
    },
    //删除征收类别
    dels(id) {
      this.$confirm("将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$get(api.cataDel + "/" + id)
            .then(response => {
              if (response.data.isOK == true && response.data.state == 200) {
                this.loading = false;
                this.search=''
				this.pages = 1
				this.cataList(this.search,this.pages)
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.loading = false;
                this.$message.error(response.data.msg);
              }
            })
            .catch(err => {
              this.loading = false;
              this.$message.error("服务器内部错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改类别
    editst(id, name, DefineID) {
      this.form.id = id;
      this.form.name = name;
      this.form.DefineID = DefineID;
      this.lands1 = true;
    },
    //确认修改类别
    editLand() {
      this.lands1 = false;
      this.loading = true;
      this.$post(api.cataUpdate, {
        ID: this.form.id,
        Name: this.form.name,
        DefineID: this.form.DefineID
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.search=''
			this.pages = 1
			this.cataList(this.search,this.pages)
            this.$message({
              message: "修改成功",
              type: "success"
            });
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("服务器内部错误");
        });
    }
  }
};
</script>

<style scoped>
.Popup .el-select {
  width: 100% !important;
}
</style>